<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
   <div id="bigg">
    <div id="ma" class="app">
      <div id="top-data" style="font-size: 14px;">
        <p id="azhe">{{mon[0]}}月{{day[0]}}日 周{{wek[0]}} </p>
        <p id="a" style="font-size: 16px;"> <span style="font-size: 15px;color: white;">输入城市：</span><input type="text" value="请输入您要的城市"  v-model="cit" @keyup.enter="search"  ><p>
      </div>
      <div id="top-two">
        <div id="left-one" @click="charts(0)">
           <div id="left-top">
               <img :src="images[0]" style="width: 100px; height: 100px; position: relative; bottom: 25px;">
           </div>
           <div id="left-tem">
               <p id="aaa"></p>            
               <p style="font-size: 45px;">{{tam}}</p>
               <p><span style="position: relative; top: 8px;">℃</span><br><br></p>
           </div>            
              <p>{{lowt[0]}}~{{higt[0]}}</p>
              <p>{{wea[0]}}</p>
              <p id="kkk" style="font-size:15px">{{win[0]}}</p>
        </div>
        <ul>
           <li class="spe" @click="charts(1)">
              <div class="line">
                 <p>周{{wek[1+lef]}}</p>
                 <p style="color: rgba(153, 142, 142, 0.6);font-weight: 600; ">{{mon[1+lef]}}月{{day[1+lef]}}</p>
                 <p style="height: 70px;"><img :src="images[1+lef]" style="width: 80px; height: 80px; position: relative; bottom: 25px; "> <img style="width: 60px;height: 50px;position: relative; bottom: 133px;margin-top: 50px; " src="箭头.png" v-on:click="gole" v-if="lef>0"></p>
                 <p>{{lowt[1+lef]}}~{{higt[1+lef]}}</p>
                 <p>{{wea[1+lef]}}</p>
                 <p style="font-size:15px">{{win[1+lef]}}</p>
                  <!--<p>优</p>-->
              </div>
           </li>
           <li class="spe" @click="charts(2)">
              <div class="line">
                 <p>周{{wek[2+lef]}}</p>
                 <p style="color: rgba(153, 142, 142, 0.6);font-weight: 600;" >{{mon[2+lef]}}月{{day[2+lef]}}</p>
                 <p style="height: 70px;"><img :src="images[2+lef]" style="width: 80px;height: 80px; position: relative; bottom: 25px;"></p>
                 <p>{{lowt[2+lef]}}~{{higt[2+lef]}}</p>
                 <p>{{wea[2+lef]}}</p>
                 <p style="font-size:15px">{{win[2+lef]}}</p>
                 <!--<p>优</p>-->
              </div>
           </li>
           <li class="spe" @click="charts(3)">
             <div class="line">
                 <p>周{{wek[3+lef]}}</p>
                 <p style="color: rgba(153, 142, 142, 0.6);font-weight: 600;" >{{mon[3+lef]}}月{{day[3+lef]}}</p>
                 <p style="height: 70px;"><img :src="images[3+lef]" style="width: 80px;height: 80px; position: relative; bottom: 25px;">
                </p>
                 <p>{{lowt[3+lef]}}~{{higt[3+lef]}}</p>
                 <p>{{wea[3+lef]}}</p>
                 <p style="font-size:15px">{{win[3+lef]}}</p>
                 <!--<p>优</p>-->
              </div>
           </li>
           <li class="spe4" @click="charts(4)">
              <div class="line">
                 <p>周{{wek[4+lef]}}</p>
                 <p style="color: rgba(153, 142, 142, 0.6);font-weight: 600;" >{{mon[4+lef]}}月{{day[4+lef]}}</p>
                 <p style="height: 70px;"><img :src="images[4+lef]" style="width: 80px;height: 80px; position: relative; bottom: 25px; "><img  style="width: 60px;height: 50px; position: relative; bottom: 95px;transform: rotate(180deg);" src="箭头.png" v-on:click="gori" v-if="lef<2"></p>
                 <p>{{lowt[4+lef]}}~{{higt[4+lef]}}</p>
                 <p>{{wea[4+lef]}}</p>
                 <p style="font-size:15px">{{win[4+lef]}}</p>
                 <!--<p>优</p>-->
              </div>
           </li>
        </ul>
      </div>
      
         
    </div>
    </div>
     <div id="last"></div>
     </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="echarts.min.js"></script>
    <script type="text/javascript">
    
    var app = new Vue({
       el: '#bigg',
       data: {
          //  用来存放 每一天的数据 
             cit:'福州',
             wek:[],   // 周几
              mon:[],   // 月份
              day:[],   // day
              lowt:[],  // 最低温度
              higt:[],  // 最高温度
              wea:[],   // 是否是晴天
              win:[],//  是否有风
              lev:"",    // 表示的是当前的空气状况
              air:"",
              tam:"",
              lef:0,
              tim:[],
              stim:[],
              rightter:[],
              images:[],
           
   },
   
   mounted:function(){
    var that=this;
       axios.get("https://v0.yiketianqi.com/api?version=v9&appid=69783459&appsecret=TU5labgu&city=福州").then(function(response){
          
          console.log(response.data.data);
          that.lev=response.data.data[0].air_level;
          that.tam=response.data.data[0].tem;
          that.tam=that.tam.substring(0,that.tam.length-1);
         console.log(that.tam);
          for(var k=0;k<7;k++)
          {
              
              that.wek.push(response.data.data[k].week[2]);  // 获取成功
              var mon1=response.data.data[k].date[5];
              var mon2=response.data.data[k].date[6];
             
              that.mon.push(mon1+""+mon2);
              var day1=response.data.data[k].day;
              var day2=day1.substring(0,day1.length-4);
              that.day.push(day2);
            that.lowt.push(response.data.data[k].tem2);
            that.higt.push(response.data.data[k].tem1);
            that.wea.push(response.data.data[k].wea);
              that.win.push(response.data.data[k].win[0]);
              console.log(that.wea);
             
          };
       
        for(var i=0;i<7;i++)
        {
           for(var k=0;k<4;k++)
           {
              //console.log(that.tim[k].tem.substring(0,that.tim[k].tem.length-1));
             //that.tim[k]=that.tim[k].tem.substring(0,that.tim[k].tem.length-1);
             that.rightter.push(response.data.data[i].hours[k].tem.substring(0,response.data.data[i].hours[k].tem.length-1));
           }
        }
        
         
                 
          for(var k=0;k<8;k++)
              console.log(that.rightter[k]);
       // for(var k=0;k<8;k++)
       //    that.stim.push(that.tim[k].tem);
       // for(var k=0;k<8;k++)
       //    console.log(that.stim[k]);
       for(var m=0;m<7;m++){
        if(that.wea[m]=="晴"||that.wea[m]=="转晴")
        that.images[m]="晴.gif"
        else if(that.wea[m]=="小雨"||that.wea[m].search("转小雨")!=-1)
        that.images[m]="小雨.gif"
        else if(that.wea[m]=="阴"||that.wea[m]=="多云"||that.wea[m].search("转多云")!=-1||that.wea[m].search("转阴"))
        that.images[m]="多云.gif"
        else if(that.wea[m].search("转雨夹雪")!=-1)
        that.images[m]="b_6.gif"
        else if(that.wea[m].search("雷阵雨")!=-1)
        that.images[m]="雷阵雨.gif"
        else if(that.wea[m].search("转小雪")!=-1)
        that.images[m]="b_16.gif"
      }
      var myChart = echarts.init(document.getElementById("last"));
          // 指定图表的配置项和数据
          myChart.setOption({
             title: {
             text: '',
  
                     },
             tooltip: {              //气泡提示框，常用于展现更详细的数据
             trigger: 'item',
             showDelay: 100,
             axisPointer: {
               type: 'line'
             },
    
            },
           legend: {               //主题
           data:['24小时温度'],
           show:false
            }, 
           grid: {                  //控制位置
               left: '3%', 
               right: '4%',
               bottom: '0.5%',
               top:"8%",
               containLabel: true     //防止标签溢出容器
                },
           toolbox: {              //  辅助工具箱，辅助功能，如添加标线，框选缩放等
           magicType: {        //是否显示工具箱文字提示，默认启用
              show : false,
                },
  
        
               },
           xAxis: {                 //x坐标轴刻度设置
           type: 'category',      //强制显示所有文本标签
           boundaryGap: false,    //数据范围
           data: ['08时','11时','14时','17时','20时','23时','02时','05时'],
           axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
               },
           yAxis: {               //y坐标轴刻度设置
              type: 'value',
              axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
              },
           series: [              //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
               { symbolSize: 6,
                 name:'24小时温度',
                 type:'line',           //line表示折线图
                 stack: '总量',
                 data:[that.rightter[0],that.rightter[1],that.rightter[2],that.rightter[3],that.rightter[4],that.rightter[5],that.rightter[6],that.rightter[7]],
                 itemStyle: {
            normal:{
                color:'white'  //改变折线点的颜色
            },
            emphasis:{
                color:'blue'     //改变折线的颜色
            }
        },
        label:{
                    show:true,
                    color:'white',
                    formatter:function(data){
                       
                        return data.value+'℃';
                    }
                },
        areaStyle: {
          color:'white',
          opacity:0.1,
          origin:'start'
        }

    
    }
  ]
          });
      },function(err){});
   },
      
       methods:{
          search:function(){
               var that=this;
       axios.get("https://v0.yiketianqi.com/api?version=v9&appid=69783459&appsecret=TU5labgu&city="+this.cit).then(function(response){
             console.log(response);
              that.wek=[];   // 周几
              that. mon=[];   // 月份
              that.day=[];   // day
              that.lowt=[];  // 最低温度
              that.higt=[];  // 最高温度
              that.wea=[];   // 是否是晴天
              that.win=[];//  是否有风
              that.lev="";   // 表示的是当前的空气状况
              that.air="";
              that.images=[];   //天气对应的图片
          for(var k=0;k<7;k++)
          {
              
              that.wek.push(response.data.data[k].week[2]);  // 获取成功
              var mon1=response.data.data[k].date[5];
              var mon2=response.data.data[k].date[6];
             
              that.mon.push(mon1+""+mon2);
              var day1=response.data.data[k].day;
              var day2=day1.substring(0,day1.length-4);
              that.day.push(day2);
            that.lowt.push(response.data.data[k].tem2);
            that.higt.push(response.data.data[k].tem1);
            that.wea.push(response.data.data[k].wea);
              that.win.push(response.data.data[k].win[0]);
          };
        that.rightter=[]; 
        for(var i=0;i<7;i++)
        {
           for(var k=0;k<4;k++)
           {
              //console.log(that.tim[k].tem.substring(0,that.tim[k].tem.length-1));
             //that.tim[k]=that.tim[k].tem.substring(0,that.tim[k].tem.length-1);
             that.rightter.push(response.data.data[i].hours[k].tem.substring(0,response.data.data[i].hours[k].tem.length-1));
           }
        }
        
         
                 
          for(var k=0;k<8;k++)
              console.log(that.rightter[k]);
       // for(var k=0;k<8;k++)
       //    that.stim.push(that.tim[k].tem);
       // for(var k=0;k<8;k++)
       //    console.log(that.stim[k]);
       for(var m=0;m<7;m++){
        if(that.wea[m]=="晴"||that.wea[m]=="转晴")
        that.images[m]="晴.gif"
        else if(that.wea[m]=="小雨"||that.wea[m].search("转小雨")!=-1)
        that.images[m]="小雨.gif"
        else if(that.wea[m]=="阴"||that.wea[m]=="多云"||that.wea[m].search("转多云")!=-1||that.wea[m].search("转阴"))
        that.images[m]="多云.gif"
        else if(that.wea[m].search("转雨夹雪")!=-1)
        that.images[m]="b_6.gif"
        else if(that.wea[m].search("雷阵雨")!=-1)
        that.images[m]="雷阵雨.gif"
        else if(that.wea[m].search("转小雪")!=-1)
        that.images[m]="b_16.gif"
      }
      var myChart = echarts.init(document.getElementById("last"));
          // 指定图表的配置项和数据
        myChart.setOption({
             title: {
             text: '',
  
                     },
             tooltip: {              //气泡提示框，常用于展现更详细的数据
             trigger: 'item',
             showDelay: 100,
    
            },
           legend: {               //主题
           data:['24小时温度'],
           show:false
            }, 
           grid: {                  //控制位置
               left: '3%', 
               right: '4%',
               bottom: '0.5%',
               top:"8%",
               containLabel: true     //防止标签溢出容器
                },
           toolbox: {              //  辅助工具箱，辅助功能，如添加标线，框选缩放等
           magicType: {        //是否显示工具箱文字提示，默认启用
              show : false,
                },
  
        
               },
           xAxis: {                 //x坐标轴刻度设置
           type: 'category',      //强制显示所有文本标签
           boundaryGap: false,    //数据范围
           data: ['08时','11时','14时','17时','20时','23时','02时','05时'],
           axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
               },
           yAxis: {               //y坐标轴刻度设置
              type: 'value',
              axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
              },
           series: [              //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
               { symbolSize: 6,
                 name:'24小时温度',
                 type:'line',           //line表示折线图
                 stack: '总量',
                 data:[that.rightter[0],that.rightter[1],that.rightter[2],that.rightter[3],that.rightter[4],that.rightter[5],that.rightter[6],that.rightter[7]],
                 itemStyle: {
            normal:{
                color:'white'  //改变折线点的颜色
            },
            emphasis:{
                color:'blue'     //改变折线的颜色
            }
        },
        label:{
                    show:true,
                    color:'white',
                    formatter:function(data){
                       
                        return data.value+'℃';
                    }
                },
        areaStyle: {
          color:'white',
          opacity:0.1,
          origin:'start'
        }

    
    }
  ]
          });
          
       },function(err){})
          },
        gole:function(){

           var that=this;
          that.lef--;
          console.log(that.lef);
        },
        gori:function(){
           var that=this;
           that.lef++;
           console.log(that.lef);
        },
        gettem:function(){

        },

        charts: function(a){
          var that=this;
          console.log(that.lef);
          var myChart = echarts.init(document.getElementById("last"));
          // 指定图表的配置项和数据
          myChart.setOption({
             title: {
             text: '',
  
                     },
             tooltip: {              //气泡提示框，常用于展现更详细的数据
             trigger: 'item',
             showDelay: 100,
             axisPointer: {
               type: 'line'
             },
    
            },
           legend: {               //主题
           data:['24小时温度'],
           show:false
            }, 
           grid: {                  //控制位置
               left: '3%', 
               right: '4%',
               bottom: '0.5%',
               top:"8%",
               containLabel: true     //防止标签溢出容器
                },
           toolbox: {              //  辅助工具箱，辅助功能，如添加标线，框选缩放等
           magicType: {        //是否显示工具箱文字提示，默认启用
              show : false,
                },
  
        
               },
           xAxis: {                 //x坐标轴刻度设置
           type: 'category',      //强制显示所有文本标签
           boundaryGap: false,    //数据范围
           data: ['08时','11时','14时','17时','20时','23时','02时','05时'],
           axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
               },
           yAxis: {               //y坐标轴刻度设置
              type: 'value',
              axisLine:{
                        lineStyle:{
                            color:'white',  //x轴坐标颜色
                            width:2,          //坐标粗细
                        }
            }
              },
           series: [              //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
               { symbolSize: 6,
                 name:'24小时温度',
                 type:'line',           //line表示折线图
                 stack: '总量',
                 data:[that.rightter[that.lef+a],that.rightter[that.lef+a+1],that.rightter[that.lef+a+2],that.rightter[that.lef+a+3],that.rightter[that.lef+a+4],that.rightter[that.lef+a+5],that.rightter[that.lef+a+6],that.rightter[that.lef+a+7]],
                 itemStyle: {
            normal:{
                color:'white'  //改变折线点的颜色
            },
            emphasis:{
                color:'blue'     //改变折线的颜色
            }
        },
        label:{
                    show:true,
                    color:'white',
                    formatter:function(data){
                       
                        return data.value+'℃';
                    }
                },
        areaStyle: {
          color:'white',
          opacity:0.1,
          origin:'start'
        }

    
    }
  ]
          });
        }
       }
   
       
     })

    </script>

    <!--<script type="text/javascript">
   
       

    var add = new Vue({
        el:"#b",
        mounted: function(){
            var myChart = echarts.init(document.getElementById("last"));
          // 指定图表的配置项和数据
          myChart.setOption({
             title: {
             text: '',
  
                     },
             tooltip: {              //气泡提示框，常用于展现更详细的数据
             trigger: 'item',
             showDelay: 100,
    
            },
           legend: {               //主题
           data:['24小时温度'],
           show:false
            }, 
           grid: {                  //控制位置
               left: '0%', 
               right: '4%',
               bottom: '0.5%',
               top:"8%",
               containLabel: true     //防止标签溢出容器
                },
           toolbox: {              //  辅助工具箱，辅助功能，如添加标线，框选缩放等
           magicType: {        //是否显示工具箱文字提示，默认启用
              show : false,
                },
  
        
               },
           xAxis: {                 //x坐标轴刻度设置
           type: 'category',      //强制显示所有文本标签
           boundaryGap: false,    //数据范围
           data: [1,2,3,4,5,9]
               },
           yAxis: {               //y坐标轴刻度设置
              type: 'value'
              },
           series: [              //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
               {
                 name:'24小时温度',
                 type:'line',           //line表示折线图
                 stack: '总量',
                 data:["11","23","25","26","32"],
                 itemStyle: {
            normal:{
                color:'red'  //改变折线点的颜色
            },
            emphasis:{
                color:'blue'     //改变折线的颜色
            }
        }
    
    }
  ]
          });
 
        }
    })
       
    
    </script>*/

   下面的折线图
  

    
    <script type="text/javascript">
        
        function $(id){
            return document.getElementById(id);
        }
        function getTem(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init($("main"));
        // 指定图表的配置项和数据
        myChart.setOption({
title: {
  text: '',

},
tooltip: {              //气泡提示框，常用于展现更详细的数据
  trigger: 'item',
  showDelay: 100,
  
},
legend: {               //主题
  data:['24小时温度'],
  show:false
}, 
grid: {                  //控制位置
  left: '5%', 
  right: '4%',
  bottom: '0.5%',
  top:"8%",
  containLabel: true     //防止标签溢出容器
},
toolbox: {              //  辅助工具箱，辅助功能，如添加标线，框选缩放等
    magicType: {        //是否显示工具箱文字提示，默认启用
        show : false,
    },

      
},
xAxis: {                 //x坐标轴刻度设置
  type: 'category',      //强制显示所有文本标签
  boundaryGap: false,    //数据范围
  data: [1,2,3,4,5,9]
},
yAxis: {               //y坐标轴刻度设置
  type: 'value'
},
series: [              //数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
  {
      name:'24小时温度',
      type:'line',           //line表示折线图
      stack: '总量',
      data:["11","23","25","26","32"]
  }
]
        });
    }
    </script>


-->

  
</body>
</html>